Keyboard shortcuts to scroll through images or other items on a page
=Project 3 writeup= Overview Scrolling through a long webpage can be awkward, and forces the eye to jump around from one location to another, as the location of various elements change. Similarly, many webpages want to display long lists by breaking them up into a series of pages connected by next page and previous page links. These links are difficult to find, and usually have a small target area. The purpose behind this project was to improve this experience through keyboard shortcuts without needing to drastically change the page itself. The interaction allows you to navigate through a set of specified elements in a page through keyboard shortcuts that scroll to the next and previous elements. In addition, you can also navigate between one page and the next through keyboard shortcuts. The aim was to make the interaction as modular as possible, so that keyboard shortcuts can be added to any webpages, regardless of how they are structured, by including a script and calling a few functions. Everything is done browser-side, rather than server-side. I chose this because it allows you to run the script from the user side, if you use a particular site often and want to add your own shortcuts without waiting for the site's owner to add it. This can be done through Greasemonkey on Firefox. In terms of performance, it makes more sense for this interaction to be implemented server-side because iterating through the elements and modifying the DOM tree for each additional element is inefficient. Thus, pages that are static on the server would benefit from adding the keyboard shortcuts feature before they are served. However, dynamically generated pages (which are the most frequent type) would benefit less from doing the computation on the server side, since the user still has to wait for the server to finish the computation. Since the target for this interaction is mainly webpages that display long lists of items, most of these would fall under the dynamically generated category. How To Use (User) From the user's point of view, all that is needed to use this functionality is a Javascript-enabled browser (although it was tested with Firefox 3). Once the webpage is loaded, the user can use the following keyboard shortcuts to navigate: j - next element (post, image, etc) k - previous element n - next page p - previous page When the user is focused on a text area or an input box, keyboard shortcuts are disabled. This is to avoid accidentally triggering the keyboard shortcuts when the user intends to type. The current element is tracked by a global variable, so it will ignore any manual scrolling by the user. It is possible to find the element that the user is currently at by comparing the window location to the boundaries of elements through the DOM and scroll to the next/prev element relative to that. However, this would need to be done each time a scrolling keyboard shortcut is used. This would not scale well to a webpage with a large number of elements, and reaction times would be slower. Therefore, I chose to not add this as a feature. How To Add To a Page Before using KeyboardNav, the script file needs to be included: